<template>
	<view class="content">
     <Loading :show="loading"></Loading>
	 
	    <view v-show="!loading">
		<u-swiper :list="buildingMsg.many_image" :autoplay="false" :numberBottom="20" :numberRight="20" mode="number"
		 indicator-pos="bottomRight" :borderRadius="0" height="400" @click="swiperIndex"></u-swiper>


		<view class="content-title padding-common">
			<text class="font">{{buildingMsg.title}}</text>
		</view>

		<view class="content-head padding-common">
			更新时间:&#8194;{{buildingMsg.time}}
		</view>

		<view class="important-information padding-common">
			<view class="important-information-part">
				
				<text class="information-part-font">￥{{Number(buildingMsg.minMeters_money).toFixed(0)}}~{{Number(buildingMsg.maxMeters_money).toFixed(0)}}</text>
				<text class="information-part-small">元/㎡/月</text>
			</view>
			<view class="important-information-part">
				<text class="information-part-font">{{buildingMsg.minSpaceNum}}~{{buildingMsg.maxSpaceNum}}</text>
				<text class="information-part-small">㎡</text>
			</view>
			<view class="important-information-part">
				<text class="information-part-font">{{buildingMsg.count}}</text>
				<text class="information-part-small">套</text>
			</view>


		</view>
		<view class="padding-common" style="margin-top: 30rpx;">
			<view class="divider-common"></view>
		</view>

		<view class="positioning padding-common">

			<view class="positioning-left">
				<view style="margin-right: 5rpx;">
					<u-icon name="map-fill" color="#666666"></u-icon>
				</view>
				<text>{{buildingMsg.street_name}} - {{buildingMsg.community_name}} {{buildingMsg.address}} </text>

			</view>
			<u-image width="120rpx" mode="widthFix" :src="imgUrl(`/images/company/map2.png`)"></u-image>
		</view>

		<view class="interval"></view>

		<view class="padding-common">
			<view class="condition-dh">
				<view :class="['condition-dh-part',index == selCondition?'condition-dh-part-sel':'']" v-for="(item,index) in condition"
				 :key="index" @click="conditionClick(index)">
					<view class="condition-dh-top">{{item.text}}</view>
					<view :class="['condition-dh-bottom',index == selCondition?'condition-dh-part-small':'condition-dh-part-nosmall']">
					
					
					<text v-show="item.text == '全部' ">{{`${buildingMsg.count}套`}}</text>
					<text v-show="item.text == '100㎡以下' ">{{`${buildingMsg['100_part']}套`}}</text>
					<text v-show="item.text == '100~200㎡' ">{{`${buildingMsg['200_part']}套`}}</text>
					<text v-show="item.text == '200~300㎡' ">{{`${buildingMsg['300_part']}套`}}</text>
					<text v-show="item.text == '300~500㎡' ">{{`${buildingMsg['500_part']}套`}}</text>
					<text v-show="item.text == '500~1000㎡' ">{{`${buildingMsg['1000_part']}套`}}</text>
					<text v-show="item.text == '1000㎡以上' ">{{`${buildingMsg['1100_part']}套`}}</text>
					</view>
				</view>
			</view>
</view>
			<view class="condition-content">
				<view :class="['condition-content-part',index != conditionList.length-1?'condition-content-part-border':'condition-content-part-white',(index+1)%2 == 0 ?'bgColorGray':'bgColorWhite']"  v-for="(item,index) in condition[selCondition].data" :key="index">
					<view :class="['condition-content-left','padding-common']">
						<u-image width="200rpx" mode="widthFix" :src="imgUrl(item.cover_image)"></u-image>
						<view class="condition-right-part">
							<view class="condition-right-part-content">
                                     <view class="condition-right-part-top">
										   <text ><text class="big">{{item.spaceNum}}</text>  <text class="small" >㎡</text></text>
										   <text><text class="big" style="color: #DD524D;">￥{{parseFloat(item.meters_money)}}</text> <text class="small" style="color:#bebebe;margin-left: 2rpx;">元/㎡/月</text></text>
										   <text class="small" style="color:#bebebe">{{secondsChange(getSecondByDateSub(item.update_time?item.update_time:item.create_time))}}</text>
										   
									 </view>
									 <view class="condition-right-part-bottom">
										 {{item.level_des}} · {{item.decorate}}
									 </view>
									 
							</view>
						</view>

					</view>


					<!-- <view class="divider-common" style="margin-top: 25rpx;" v-show="index != conditionList.length-1"></view> -->
				</view>
				<view style="display: flex;justify-content: center;width: 100%;margin-bottom: 30rpx;">
				   <u-loading mode="circle" color="#2979ff" :show="condition[selCondition].loading && condition[selCondition].data.length == 0"></u-loading>
				   
				    <u-empty  mode="data" :show="!condition[selCondition].loading&&condition[selCondition].data.length == 0"></u-empty>
				 </view>
				<view class="padding-common" style="margin-top: 30rpx;margin-bottom: 30rpx;" v-show="condition[selCondition].buttonShow">
					<u-button type="primary" :loading="condition[selCondition].loading"  :custom-style="{background:'#ecf5ff !important',color:'#2979ff !important' }" style="width: 100%;" @click="addMore">查看更多</u-button>
				</view>
			</view>


		
		<view class="interval"></view>
		<view class="padding-common" style="width: 100%;">

			<view class="subscribe">
				<view class="u-image">
					<u-image mode="widthFix" width="130rpx" :src="imgUrl(`/images/company/subscribe3.png`)"></u-image>
				</view>
				<view class="subscribe-content">
					<text class="subscribe-content-title">
						咨询个性化办公需求
					</text>

					<text class="subscribe-content-font">
						户型不符号，户型分割合并，定制你的专属办公室
					</text>
					<view class="subscrib-line">
						<view class="subscrib-line-input">
							<input placeholder="请输入手机号码" v-model="subscribePhone" type="number" />
						</view>
						<u-button :custom-style="{
							'width': '200rpx',
							'height': '100%',
							'display': 'flex',
							'justify-content': 'center',
							'align-items': 'center',
							'background': '#2cabff',
							'color': 'white',
						}" :loading="subscribeLoading" @click="subscribe">立即预约</u-button>
					</view>
				</view>
			</view>
		</view>

		<view class="interval"></view>
		<view class="pattern padding-common">
			<view class="pattern-title " style="margin-top: 25rpx;">大厦简介</view>

			<view class="positioning-detailed ">
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.completion_time)">
					<text class="positioning-detailed-left">竣工时间</text>
					<text class="positioning-detailed-right">{{buildingMsg.completion_time}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.address)">
					<text class="positioning-detailed-left">地理位置</text>
					<text class="positioning-detailed-right">{{buildingMsg.address}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.height)">
					<text class="positioning-detailed-left">层高</text>
					<text class="positioning-detailed-right">{{buildingMsg.height}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.layerNumber)">
					<text class="positioning-detailed-left">层数</text>
					<text class="positioning-detailed-right">{{buildingMsg.layerNumber}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.property)">
					<text class="positioning-detailed-left">物业</text>
					<text class="positioning-detailed-right">{{buildingMsg.property}}</text>
				</view>
				<view class="positioning-detailed-part"  v-if="checkField(buildingMsg.propertyFee)">
					<text class="positioning-detailed-left">物业费</text>
					<text class="positioning-detailed-right">{{buildingMsg.propertyFee}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.stall)">
					<text class="positioning-detailed-left">车位</text>
					<text class="positioning-detailed-right">{{buildingMsg.stall}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.stall_money)">
					<text class="positioning-detailed-left">车位月租金</text>
					<text class="positioning-detailed-right">{{buildingMsg.stall_money}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.air)">
					<text class="positioning-detailed-left">空调</text>
					<text class="positioning-detailed-right">{{buildingMsg.air}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.air_cost)">
					<text class="positioning-detailed-left">空调费</text>
					<text class="positioning-detailed-right">{{buildingMsg.air_cost}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.air_open_time)">
					<text class="positioning-detailed-left">空调开放时间</text>
					<text class="positioning-detailed-right">{{buildingMsg.air_open_time}}</text>
				</view>
				<view class="positioning-detailed-part" v-show="checkField(buildingMsg.elevator)">
					<text class="positioning-detailed-left">电梯</text>
					<text class="positioning-detailed-right">{{buildingMsg.elevator}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.network)">
					<text class="positioning-detailed-left">网络</text>
					<text class="positioning-detailed-right">{{buildingMsg.network}}</text>
				</view>

				<view class="positioning-detailed-part" v-if="checkField(buildingMsg.in_enterprise)">
					<text class="positioning-detailed-left">入驻企业</text>
					<text class="positioning-detailed-right">{{buildingMsg.in_enterprise}}</text>
				</view>
                   
				 <view class="positioning-detailed-part" :key="index" v-if="checkField(item.field) && checkField(item.content)" v-for="(item,index) in buildingMsg.custom">
				   	<text class="positioning-detailed-left">{{item.field}}</text>
				   	<text class="positioning-detailed-right">{{item.content}}</text>
				   </view>
			</view>

			<view class="detail-images">
				<view class="detail-images-left" @click="imagesBig(imgUrl(buildingMsg.cover_image))">
					<image :src="imgUrl(buildingMsg.cover_image)" style="height: 100%;width: 100%;" mode="scaleToFill"></image>
				</view>

                  
				<view class="detail-images-right" >
				<!-- {{buildingMsg.many_image[0]}} -->
					<view class="detail-images-right-part" @click="imagesBig(oneImageUrl)" v-if="oneImageUrl">
						<image :src="oneImageUrl" style="width: 100%;height: 100%;" mode="scaleToFill"></image>
					</view>
					<view class="detail-images-right-part" @click="imagesBig(twoImageUrl)" v-if="twoImageUrl">
						<image :src="twoImageUrl" style="width: 100%;height: 100%;" mode="scaleToFill"></image>
					</view>
				</view>


			</view>
			<view class="buildings-details" v-if="checkField(buildingMsg.describe)">
				<u-read-more ref="uReadMore" text-indent="0em" show-height="250" font-size="25" :toggle="true">
					<u-parse :html="buildingMsg.describe" @load="parseLoaded"></u-parse>
				</u-read-more>
			</view>
		</view>




		<view class="interval"></view>

		<view class="pattern padding-common" v-if="!loading">
			<view class="pattern-title" style="margin-bottom: 20rpx;">查看位置</view>
			<uMap :longitude="buildingMsg.longitude" :latitude="buildingMsg.latitude" :address="buildingMsg.title"></uMap>
			<view class="recommended-bottom-button" @click="go()"> <text>开始出发</text> </view>
		</view>

		<view class="interval"></view>

		<view class="pattern padding-common" style="margin-bottom: 180rpx;" >
			<view class="pattern-title" style="margin-bottom: 20rpx;">看过该大厦的人还看了</view>
			<view class="see-move" >
				<navigator class="see-move-part" v-for="(item,index) in seeMove" :key="index" :url="`./Details?id=${item.id}`">
					<SeeMore :sourceDataProps="mapping(item)"></SeeMore>
					<!-- {{mapping(item)}} -->
				</navigator>

			</view>
		</view>
		<view class="interval"></view>
		<foot  @collection="collection" :telPhoneNumber="buildingMsg.hotline" :isCollectProps="buildingMsg.hasOwnProperty('collection') && buildingMsg.collection == 1 ?true:false" v-if="!loading" ></foot>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uMap from "@/components/map"
	import SeeMore from "@/components/see-move/SeeMove.vue"
	import foot from "@/components/foot/foot.vue"
	import Loading from "@/components/loading/loading.vue"
	import {buildingSelOne,buildingWebListRand} from "@/services/building.js"
	import {housingBuildingList} from "@/services/housing.js"
	import {
		mapMutations,
	} from "vuex";
	import {
		collectionOne
	} from "@/services/collectionHistory.js"
	import {
		subscribeAdd
	} from "@/services/subscribe.js"
	export default {
		components: {
			uMap,
			SeeMore,
			foot,
			Loading
		},
		data() {
			return {
				loading:true,
				seeMoreLoading:true,
				subscribeLoading:false,
				subscribePhone:'',
				buildingMsg: {},
				condition: [{
						text: '全部',
						config:{
							keyWord:{'equal-housing-spaceNum' :''},
							pageSize:5,
							page:1,
						},
						loading:false,
						buttonShow:false,
						data:[]
					},
					{
						text: '100㎡以下',
						config:{
							keyWord:{'lessEq-housing-spaceNum' :'100'},
							pageSize:5,
							page:1,
						},
						loading:false,
						buttonShow:false,
						data:[]
					},
					{
						text: '100~200㎡',
						config:{
							keyWord:{'between-housing-spaceNum' :'100,200'},
							pageSize:5,
							page:1,
						},
						loading:false,
						buttonShow:false,
						data:[]
					},
					{
						text: '200~300㎡',
						config:{
							keyWord:{'between-housing-spaceNum' :'200,300'},
							pageSize:5,
							page:1,
						},
						loading:false,
						buttonShow:false,
						data:[]
					},
					{
						text: '300~500㎡',
						
						config:{
							keyWord:{'between-housing-spaceNum' :'300,500'},
							pageSize:5,
							page:1,
						},
						loading:false,
						buttonShow:false,
						data:[]
					},
					{
						text: '500~1000㎡',
						config:{
							keyWord:{'between-housing-spaceNum' :'500,1000'},
							pageSize:5,
							page:1,
						},
						loading:false,
						buttonShow:false,
						data:[]
					},
					{
						text: '1000㎡以上',
						config:{
							keyWord:{'greaterEq-housing-spaceNum' :'1000'},
							pageSize:5,
							page:1,
						},
						loading:false,
						buttonShow:false,
						data:[]
					},
				],
				selCondition: 0,
				id:"",
				oneImageUrl:'',
				twoImageUrl:'',
				seeMove: [],
			}
		},
		onLoad(param){
			 this.id = param.id
			 // this.id = 10
			 this.buildingSelOneLoad()
			 this.buildingWebListRandLoad()
			 this.addHistoryMu({building:this.id})
			 this.conditionClick(0)
			 // console.log(this.id)
		},
		
		methods: {
			...mapMutations("user", ["addHistoryMu"]),
			
			parseLoaded() {
				this.$refs.uReadMore.init();
			},
			async subscribe(){
				if (!(/^1[3456789]\d{9}$/.test(this.subscribePhone))) {
					 this.$refs.uToast.show({
					 	title: '请输入正确的电话号码',
					 	type: 'info',
					 })
				}else{
					this.subscribeLoading = true
				    let res =	 await subscribeAdd({formData:{
						phone:this.subscribePhone,
						target_id:this.id,
						table:'building'
					}})
					this.subscribeLoading = false
					if(res.code == 200){
						this.$refs.uToast.show({
							title: '预约成功',
							type: 'success',
							duration:1500,
							callback:function(){
								uni.navigateTo({
									url:'../mine/MySubscribe'
								})
							}
						})
					}
				} 
			},
			async conditionClick(index) {
				 this.selCondition = index
				 if(this.condition[index].data.length == 0){
					 this.condition[index].loading = true
					 this.condition[index].config.keyWord['equal-housing-building_id'] = this.id
					 let res  =  await housingBuildingList(this.condition[index].config)
					 if(res.code == 200){
						this.condition[index].buttonShow = res.data.length == 0 ? false: true
							
						 this.condition[index].data = res.data
						 
					 }
					 
					 this.condition[index].loading = false
				 }
				
				
			},
			mapping(item){
				return {
					title:item.title,
					price: Number(item.avgMeters_money).toFixed(0),
					longitude:item.longitude,
					latitude:item.latitude,
					images: item.cover_image,
				}
			},
			collection(e){
				 // console.log(e)
				 // console.log(1)
				 collectionOne({
					 collection:e,
					 table:'building',
					 target_id:this.id
				 }) 
				 
			},
			swiperIndex(index){
				// console.log(index)
				this.imagesBig(this.buildingMsg.many_image,index)
			},
		    async	buildingSelOneLoad(){
				this.loading = true
				let res = await buildingSelOne({id:this.id})
				if(res.code == 200){
					let contentMsg = res.data
					contentMsg.time = (contentMsg.update_time ? contentMsg.update_time : contentMsg.create_time).split(' ')[0]
					contentMsg.many_image = contentMsg.many_image?contentMsg.many_image.split(',').map(item=>  this.imgUrl(item) ):[]
					contentMsg.longitude = parseFloat(contentMsg.longitude)
					contentMsg.latitude = parseFloat(contentMsg.latitude)
					// console.log(contentMsg.many_image)
					if(contentMsg.many_image.length >= 1){
						this.oneImageUrl = contentMsg.many_image[0]
					}
					if(contentMsg.many_image.length >= 2){
						this.twoImageUrl = contentMsg.many_image[1]
					}
					contentMsg.custom = contentMsg.custom?JSON.parse(contentMsg.custom):[]
					this.buildingMsg = contentMsg
					uni.setNavigationBarTitle({
						title:`${this.buildingMsg.title}`
					});
				}
				this.$nextTick(()=>{
					this.loading = false
				})
			},
			async addMore(){
				let index =  this.selCondition 
				  this.condition[index].config.page++
				  this.condition[index].loading = true
				  this.condition[index].config.keyWord['equal-housing-building_id'] = this.id
				  // console.log(this.condition[index].config)
				  let res  =  await housingBuildingList(this.condition[index].config)
				  if(res.code == 200){
					    if(res.data.length == 0 ){
							this.$refs.uToast.show({
								title: '没有更多数据',
								type: 'info',
							})
							 this.condition[index].config.page--
						}else{
							this.condition[index].data =  [...this.condition[index].data,...res.data]
						}
				  }
				  this.condition[index].loading = false
				
			},
			async buildingWebListRandLoad(){
				  this.seeMoreLoading = true
				  let res =   await buildingWebListRand({limit:4,id:this.id})
				  if(res.code == 200){
					  this.seeMove = res.data
				  }
				  console.log( this.seeMove)
				   this.seeMoreLoading = false
			},
			go() {
				const {
					buildingMsg
				} = this
				uni.openLocation({
					latitude: buildingMsg.latitude, //纬度
					longitude: buildingMsg.longitude, //经度
					name: `${buildingMsg.title}`,
					address: `${buildingMsg.address}`,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		background: white;
		// overflow-x: hidden;
		width: 100%;
		// .divider{
		// 	margin-top: 30rpx;
		// 	border-bottom: 1rpx solid #f0f0f0;
		// 	width: 100%;

		// }
		.important-information {
			width: 100%;
			display: flex;

			// height: 80rpx;
			.important-information-part {
				height: 100%;
				margin-top: 30rpx;
				// padding-bottom: 30rpx;

				.information-part-font {
					color: #DD524D;
					font-size: 30rpx;
					font-weight: bold;
				}

				.information-part-small {
					margin-left: 2rpx;
					font-size: 22rpx;
					color: #abadb1;
				}
			}

			.important-information-part:nth-child(1) {
				padding-right: 30rpx;
			}

			.important-information-part:nth-child(2) {
				padding-right: 30rpx;
			}

			.important-information-part:nth-child(n+2) {
				border-left: 2rpx solid #dedede;
				padding-left: 30rpx;
			}

			.important-information-part:nth-child(3) {
				flex: 1;
			}
		}

		.condition-content {
			width: 100%;
			display: flex;
			flex-direction: column;

			.condition-content-add {
				width: 100%;
				height: 80rpx;
				background-color: #ecf5ff;
				color: #13adff;
				font-size: 28rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
			}
             .condition-content-part-border{
				 border-bottom: 1rpx solid  #efefef;
			 }
			 .condition-content-part-white{
			 				 border-bottom: 1rpx solid  white;
			 }
			 .bgColorGray{
				 background:  #f9f9f9;
			 }
			 .bgColorWhite{
				 background:  white;
			 }
			.condition-content-part {
				width: 100%;
				display: flex;
				flex-direction: column;
				// padding-bottom: 20rpx;
				height: 180rpx;
				// border: 1rpx solid red;
				padding-top: 30rpx;
				 padding-bottom: 30rpx;
				.condition-content-left {
					display: flex;
					height: 100%;
					// border: 1rpx solid red;
					.condition-right-part {
						display: flex;
						flex: 1;
						height: 100%;
						flex-direction: column;
						justify-content: flex-end;
						margin-left: 25rpx;
                        .condition-right-part-content{
							height: 70%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: 100%;
							 .condition-right-part-top{
								 display: flex;
								 justify-content: space-between;
								 align-items: baseline;
								 width: 100%;
								
								 .small{
									font-size: 24rpx; 
								 }
								 .big{
									 font-weight: bold;
									  font-size: 30rpx;
								 }
							 }
							 .condition-right-part-bottom{
								 font-size: 24rpx;
								 color: #bebebe;
							 }
						}
					}
				}

			}


		}

		.condition-dh {
			display: flex;
			// width: 200%;
			width: 100%;
			// border: 1rpx solid red;
			overflow: auto;
			margin-top: 50rpx;
			margin-bottom: 30rpx;

			.condition-dh-part-sel {
				background: #33a1ef;
				color: white;
			}

			.condition-dh-part-small {
				color: white;
			}

			.condition-dh-part-nosmall {
				color: #a6a6a6;
			}

			.condition-dh-part {
				height: 100rpx;
				border: 3rpx solid #dedede;
				flex: 0 0 auto;
				width: 220rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 5rpx;

				.condition-dh-top {
					margin-top: 15rpx;
					font-size: 28rpx;
				}

				.condition-dh-bottom {
					font-size: 23rpx;
					margin-top: 3rpx;

				}
			}

			.condition-dh-part:nth-child(n+2) {
				margin-left: 20rpx;
			}
		}


		.positioning {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			// border: 1rpx solid red;
			margin-bottom: 15rpx;

			.positioning-left {
				display: flex;
				align-items: baseline;
				line-height: 40rpx;

				text {
					color: #666666;
					font-size: 27rpx;

				}
			}


			.positioning-left {
				display: flex;
			}
		}

		.content-title {
			margin-top: 35rpx;
			font-size: 40rpx;

			.font {
				font-weight: 500;
			}
		}

		.content-head {

			// margin-left: 10rpx;
			margin-top: 5rpx;
			font-size: 22rpx;
			color: #aaaaaa;
		}

		.subscribe {
			margin-top: 40rpx;
			border: 1rpx solid #f0f0f0;
			width: 100%;
			height: 300rpx;
			position: relative;
			margin-bottom: 50rpx;

			// display: flex;
			// justify-content: flex-end;
			.subscribe-content {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				flex-direction: column;
				padding: 50rpx 30rpx 0 30rpx;

				.subscribe-content-title {
					font-size: 32rpx;
				}

				.subscribe-content-font {
					font-size: 22rpx;
					margin-top: 10rpx;
					color: #686868;
				}

				.subscrib-line {
					width: 100%;
					// border: 1rpx solid red;
					display: flex;
					height: 80rpx;
					margin-top: 50rpx;

					.subscrib-line-input {
						flex: 1;
						height: 100%;
						background: #f7f7f7;
						padding-left: 20rpx;
						display: flex;
						align-items: center;
						color: #9e9e9e;
					}

					.subscrib-line-button {
						width: 200rpx;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						background: #2cabff;
						color: white;
					}
				}
			}
		}

		.buildings-details {
			width: 100%;
			margin-top: 40rpx;
		}

		.detail-images {
			display: flex;
			width: 100%;
			height: 310rpx;
			margin-top: 20rpx;

			.detail-images-left {
				flex: 6.5;
				// border: 1rpx solid red;
				// height: 100%;
			}

			.detail-images-right {
				flex: 3;
				margin-left: 10rpx;
				// border: 1rpx solid red;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				// border: 1rpx solid red;
				.detail-images-right-part {
					height: 49%;
					width: 100%;

					// border: 1rpx solid red;
				}
			}
		}



		.positioning-detailed {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.positioning-detailed-part {
				width: 45%;
				display: flex;
				flex-direction: column;
				// padding-left: 10rpx;
				margin-top: 20rpx;

				.positioning-detailed-left {
					white-space: nowrap;
					color: #6c6c6c;
					font-size: 25rpx;
				}

				.positioning-detailed-right {
					flex: 1;
					word-break: break-all;
					margin-top: 15rpx;
					font-size: 28rpx;
					margin-top: 10rpx;
					// display: flex;
					// flex-wrap: wrap;
					// margin-left: 20rpx;
				}
			}
		}

		.padding-common {
			padding: 0 35rpx 0 35rpx;
		}

		.pattern {
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			margin-bottom: 20rpx;

			.pattern-title {
				font-size: 30rpx;
				font-weight: 510;
			}

			.pattern-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 30rpx;
					font-weight: 510;
				}

				.right {
					font-size: 25rpx;
					color: #2cabff;
					display: flex;
					align-items: baseline;
				}
			}

			.pattern-content {
				width: 100%;
				margin-top: 30rpx;
				display: flex;

				.pattern-content-right {
					flex: 1;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;

					.pattern-content-name {
						font-weight: 510;
						font-size: 30rpx;
						margin-bottom: 10rpx;
						overflow: hidden;

						text-overflow: ellipsis;

						display: -webkit-box;

						-webkit-box-orient: vertical;

						-webkit-line-clamp: 1;
					}

					.pattern-content-part {
						margin-top: 15rpx;
						display: flex;
						align-items: baseline;

						.left {
							color: #b4b4b4;
							font-size: 28rpx;
							white-space: nowrap;
						}

						.right {
							margin-left: 15rpx;
							font-size: 28rpx;
							overflow: hidden;

							text-overflow: ellipsis;

							display: -webkit-box;

							-webkit-box-orient: vertical;

							-webkit-line-clamp: 1;
						}
					}
				}
			}

			.recommended-bottom-button {
				width: 100%;
				height: 80rpx;
				background-color: #ecf5ff;
				color: #2979ff;
				font-size: 30rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;
				margin-bottom: 20rpx;
			}
		}

		.see-move {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.see-move-part {
				width: 48%;
				// border: 1rpx solid red;
				// height: 200rpx;
				margin-top: 20rpx;
			}

			// height: 200rpx;


		}

		.u-image {
			// width: 100%;
			// border: 1rpx solid red;
			height: 100%;
			// padding-top: 30rpx;
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;
			// align-items: center;
		}
	}
</style>
